<template>
	<div class="page">
		<!-- <global-header title="回水设置" @back="$router.back()" /> -->
		<global-header title="回水设置" @back="$router.back()">
			<template #right>
				<div class="mr-[10px]  back-right" @click="handleSubmit">
					保存设置
				</div>
			</template>
		</global-header>
		<main class="page-main">
			<div class="bg-white mt-[10px] list-header">
				<div class="row-start-center text-[14px] text-[#888] pt-[12px] pb-[10px] px-[15px]"
					style="border-bottom: 1px solid #e4e4e4">
					<div class="w-[40%] text-center">游戏名称</div>
					<div class="w-[25%] text-center">回水类型</div>
					<div class="w-[25%] text-center">回水时间</div>
					<div class="w-[25%] text-center">回水比例</div>
				</div>
			</div>
			<div class="page-main" ref="scrollRef">
				<div class="bg-white">
					<template v-for="item in gameList">
						<div class="row-start-center py-[15px] text-[14px] border-bottom text-[#444] px-[15px]">
							<div class="w-[35%] break-all box-border px-[4px]">
								{{ item.LotteryName }}
							</div>
							<div class="w-[25%] text-center break-all box-border px-[4px]" @click="() => {
								typePicker.changeItem = item;
								typePicker.show = true;
							}">
								{{ options.find(e => e.value === item.Type)?.text }} <van-icon name="arrow-down"></van-icon>
								<!-- <van-dropdown-menu>
									<van-dropdown-item v-model="item.Type" :options="options" />
								</van-dropdown-menu> -->
							</div>
							<div class="w-[30%] text-center break-all box-border px-[4px]">
								<div class="truncate" @click="handleBackTime(item)">
									{{ item.BackTime }}
								</div>
							</div>
							<div class="w-[25%] text-center box-border px-[4px]">
								<div class="truncate"> <van-field v-model="item.BackRate" input-align="center" /></div>


							</div>
						</div>
					</template>
				</div>
			</div>
			<van-popup round v-model:show="timePickerShow" position="bottom" :style="{ height: '50%' }"
				:close-on-click-overlay="true">
				<div class="popup-box">
					<van-time-picker v-model="listItem.BackTime" title="选择时间" @confirm="backTimeConfirm" />
				</div>
			</van-popup>
			<van-popup round v-model:show="typePicker.show" position="bottom" :style="{ height: '50%' }"
				:close-on-click-overlay="true">
				<van-picker title="回水类型" :model-value="typeValue" :columns="options" @confirm="({ selectedValues }) => {
					typePicker.changeItem.Type = selectedValues[0];
					typePicker.show = false;
				}" @cancel="typePicker.show = false" />
			</van-popup>

		</main>
	</div>
</template>


<route>
  {
    name: "admin-backwater-setting",
    meta: {
      pageIndex: 4,
    }
  }
</route>

<script setup lang="ts">
import { toast } from "@/utils/toast";
import { debounce } from "lodash-es";
import { reqBackWaterSetting, reqBackWaterSettingBatch } from "@/api/backwater";


const typePicker = ref({
	show: false,
	changeItem: {
		Type: 1 as any
	}
})

const typeValue = computed(() => {
	return [typePicker.value.changeItem.Type]
})

const gameList = ref<any[]>([]); // 会员列表
const listItem = ref<any>({})
const timePickerShow = ref(false)
const getList = async () => {
	try {
		const response = await reqBackWaterSetting();
		gameList.value = response.data
	} catch (err) {
		console.log(err)
	}
}
const options = ref([
	{ text: '不返点', value: 1 },
	{ text: '流水', value: 2 },
	{ text: '亏损', value: 3 },
	{ text: '盈利', value: 4 },
]);
// 处理选项变化
const handleBackTime = (item: any) => {
	listItem.value = {
		...item,
		BackTime: item?.BackTime.split(':').map((str: string) => String(str))
	}
	timePickerShow.value = true
};
const backTimeConfirm = () => {
	gameList.value.forEach((e) => {
		if (e.Id === listItem.value.Id) {
			e.BackTime = listItem.value.BackTime.join(':')
		}
	})

	timePickerShow.value = false

}
const handleSubmit = debounce(async () => {
	try {
		const res = await reqBackWaterSettingBatch({
			List: gameList.value.map(item => {
				return {
					Id: item.Id,
					Type: item.Type || 1,
					BackTime: item.BackTime || "00:00",
					BackRate: +item.BackRate
				};
			})
		})
		if (res.code === 200) {
			toast.success("保存成功");
			getList()
		}

	} catch {

	}
})
onMounted(() => {
	getList()
})
</script>
<style scoped lang="scss">
.list-header {
	position: sticky;
	top: 0;
	left: 0;
	background: #fff;
	z-index: 999;

}

.truncate {
	// border: 1px solid red;
	height: 30px;
	background: #F1F4FB;
	border-radius: 5px 5px 5px 5px;
	border: 1px solid #3976CC;
	display: flex;
	justify-content: center;
	align-items: center;
}

.back-right {
	border-radius: 30px;
	width: 60px;
	height: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #3976CC;
}

:deep() {
	.van-dropdown-menu__bar {
		box-shadow: none !important;
	}
}
</style>
